<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文章管理 - EasyBlog博客</title>
    <th:block th:replace="~{ fragment/common::common_head}" />
</head>
<body>

<!--导航-->
<div th:replace="~{fragment/nav :: navbar}"></div>


<!--中间内容-->
<div class="m-content-container">
    <div class="ui stackable grid">
        <!--侧边栏-->
        <div th:replace="~{fragment/blog-manage::manage}"></div>
        <!--博客内容-->
        <div class="thirteen wide column">
            <!--header-->
            <div th:replace="~{fragment/blog-manage::header}"></div>

            <!--content-->
            <div class="ui attached bottom segment border-bt-none" style="padding-top: 0 !important;padding-bottom: 0 !important;">
                <div th:if="${articlePages!=null&&#lists.size(articlePages.getList())>0}" th:each="article:${articlePages.getList()}" class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear border-dashed"
                     style="padding-bottom: 20px !important;padding-top: 10px !important;">
                    <div class="ui mobile reversed stackable grid">
                        <div class="sixteen wide column">
                            <button th:switch="${article.getArticleType()}"
                                    class="ui mini red basic button  m-inline-block ">
                                <span th:case="0">原创</span>
                                <span th:case="1">转载</span>
                                <span th:case="2">翻译</span>
                            </button>
                            <h3 class="ui header m-inline-block m-margin-top-small m-margin-bottom-small">
                                <a href="#" th:href="@{/article/details/{id}(id=${article.getArticleId()},userId=${user.getUserId()})}" title="查看" class="m-black" th:text="${article.getArticleTopic()}">你真的理解什么是财富自由吗？</a>
                            </h3>
                            <div class="ui stackable grid">
                                <div class="eleven wide column">
                                    <div class="ui mini horizontal link list">
                                        <div class="item">
                                            <span style="font-size: 12px !important;" th:switch="${article.getArticleStatus()}">
                                                 <span th:case="0">公开</span>
                                                 <span th:case="1">私有</span>
                                                 <span th:case="2">草稿</span>
                                            </span>
                                        </div>
                                        <div class="item">
                                            <i class="calendar icon"></i> <span style="font-size: 12px !important;"
                                                                                th:text="${#dates.format(article.getArticlePublishTime(),'yyyy年MM月dd  hh:mm:ss')}">2017-10-01</span>
                                        </div>
                                        <div class="item">
                                            <i class="eye icon"></i> <span style="font-size: 12px !important;" th:text="${article.getArticleClick()}">2342</span>
                                        </div>
                                        <div class="item">
                                            <i class="comment alternate icon"></i> <span style="font-size: 12px !important;" th:text="${article.getArticleCommentNum()}">2342</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="right aligned five wide column">
                                    <div class="five  wide  column">
                                        <div class="ui horizontal list">
                                            <div class="item"><a href="#" title="编辑文章可以重新发布" th:href="@{/manage/blog/edit(articleId=${article.getArticleId()},userId=${user.getUserId()})}" style="color: #349EDF">编辑</a></div>
                                            <div class="item"><a href="#" title="回收至草稿箱" th:href="@{/manage/blog/recycleToDraft(articleId=${article.getArticleId()},userId=${user.getUserId()})}" style="color: #349EDF">回收草稿箱</a></div>
                                            <div class="item"><a href="#" title="恢复为公开文章" th:href="@{/manage/blog/recycleToPublic(articleId=${article.getArticleId()},userId=${user.getUserId()})}" style="color: #349EDF">还原文章</a></div>
                                            <div class="item"><a href="#" title="彻底在磁盘上删除此文章" th:href="@{/manage/blog/deleteComplete(articleId=${article.getArticleId()},userId=${user.getUserId()})}" style="color: #CA0C16">彻底删除</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment " th:if="${articlePages.getTotal()==0}" style="padding-top: 10rem !important;padding-left: 30rem !important;padding-bottom: 20rem !important;">
                <div style="color: grey !important;font-size: 14px !important;">没有任何<span style="color: #00c4ff !important;">可回收</span>文章</div>
            </div>
            <!--分页按钮-->
            <div th:if="${articlePages.getTotal()>15}" class="ui bottom attached segment " style="border-top: 1px solid #ccc">
                <div class="ui middle aligned two column grid">
                    <div class="column" style="margin: 5px auto;float: left !important;">
                        <div class="ui buttons">
                            <a th:href="@{/manage/blog/dash(page=${articlePages.getPrePage()},userId=${user.getUserId()})}">
                                <button class="ui button" style="background: white !important;font-weight: 100 !important;">上一页
                                </button>
                            </a>
                            <a  th:each="pageNo:${articlePages.getNavigatepageNums()}"
                                th:href="@{/manage/blog/dash(page=${pageNo},userId=${user.getUserId()})}">
                                <button  class="ui button pages" >
                                    [[${pageNo}]]
                                </button>
                            </a>
                            <a  th:href="@{/manage/blog/dash(page=${articlePages.getNextPage()},userId=${user.getUserId()})}">
                                <button class="ui right button"
                                        style="background: white !important;font-weight: 100 !important;"> 下一页
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${articlePages.getTotal()>0 && articlePages.getTotal()<15}" class="ui bottom attached segment" style="padding-top: 5px !important;padding-bottom: 5px !important;"></div>
        </div>
    </div>

</div>


<div style="height: 10em"></div>
<!--底部footer-->
<div th:replace="~{ fragment/common :: footbar}"></div>

</body>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../../static/js/easyblog.js" th:src="@{/static/js/easyblog.js}"></script>
<script type="text/javascript">

    $(document).ready(function () {
        let userId=$('#userId').val();
        showPageZoomWarning();
        toggleStatus();
        logOut();
        showCurrentPageNum();
    });

    function showCurrentPageNum() {
        let obj=document.getElementsByClassName('pages');
        let page=[[${articlePages.pageNum}]];
        for(let i=0;i<obj.length;i++){
            if(obj[i].textContent==page){
                $(obj[i]).css("cssText", "background:#ddd !important");
            }
        }
    }
</script>

<script>
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });

    $('#searchBar').click(function () {
        $('#reloadSearchBar').css("display", "block");  //显示div
    });

</script>
<script>
    $('#side-bnt3').css("background","#DB2828");
    $('#side-bnt3').css("color","#ffffff");
    $('#dash').css("cssText","color: #349EDF !important");
</script>
</html>